{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if (eq @mode "edit")}}
  <form onsubmit={{action "onSaveChanges"}} data-test-clients-config-form>
    <div class="box is-sideless is-fullwidth is-marginless">
      <MessageError @model={{@model}} @errorMessage={{this.error}} />
      {{#each @model.formFields as |attr|}}
        {{#if (eq attr.name "enabled")}}
          {{#unless @model.reportingEnabled}}
            <label class="is-label">Usage data collection</label>
            <p class="sub-text">
              Enable or disable client tracking. Keep in mind that disabling tracking will delete the data for the current
              month.
            </p>
            <div class="control is-flex has-bottom-margin-l">
              <input
                data-test-input="enabled"
                type="checkbox"
                id="enabled"
                name="enabled"
                class="toggle is-success is-small"
                checked={{eq @model.enabled "On"}}
                {{on "change" this.toggleEnabled}}
              />
              <label for="enabled" class="has-text-weight-bold is-size-8">
                Data collection is
                {{lowercase @model.enabled}}
              </label>
            </div>
          {{/unless}}
        {{else}}
          <FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.validations}} />
        {{/if}}
      {{/each}}
    </div>
    <div class="field is-grouped-split box is-fullwidth is-bottomless">
      <Hds::ButtonSet>
        <Hds::Button @text="Save" type="submit" disabled={{this.buttonDisabled}} data-test-submit />
        <Hds::Button @text="Cancel" @color="secondary" @route="vault.cluster.clients.config" />
      </Hds::ButtonSet>
    </div>
  </form>

  {{#if this.modalOpen}}
    <Hds::Modal id="clients-config-modal" @color="warning" @onClose={{fn (mut this.modalOpen) false}} as |M|>
      <M.Header @icon="alert-triangle" data-test-clients-config-modal="title">
        {{this.modalTitle}}
      </M.Header>
      <M.Body>
        {{#if (eq @model.enabled "On")}}
          <p class="has-bottom-margin-s" data-test-clients-config-modal="on">
            Vault will start tracking data starting from today’s date,
            {{date-format (now) "MMMM d, yyyy"}}. If you’ve previously enabled usage tracking, that historical data will
            still be available to you.
          </p>
        {{else}}
          <p class="has-bottom-margin-s" data-test-clients-config-modal="off">
            Turning usage tracking off means that all data for the current month will be deleted. You will still be able to
            query previous months.
          </p>
          <p>Are you sure?</p>
        {{/if}}
      </M.Body>
      <M.Footer as |F|>
        <Hds::ButtonSet>
          <Hds::Button @text="Continue" {{on "click" (perform this.save)}} data-test-clients-config-modal="continue" />
          <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} data-test-clients-config-modal="cancel" />
        </Hds::ButtonSet>
      </M.Footer>
    </Hds::Modal>
  {{/if}}
{{else}}
  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-clients-config-table>
    {{#each this.infoRows as |item|}}
      <InfoTableRow @label={{item.label}} @helperText={{item.helperText}} @value={{get @model item.valueKey}} />
    {{/each}}
  </div>
{{/if}}